<script setup lang="ts">
// import { OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { reactive } from 'vue'
import BrownianDistributionExperience from './BrownianDistributionExperience.vue'

const state = reactive({
  clearColor: '#1e1f22',
  shadows: true,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
})
</script>

<template>
  <OverlayInfo>
    <h1>Basic</h1>
    <p>This is a basic scene with basic elements.</p>
    <h2>Setup</h2>
    <p>The scene includes:</p>
    <ul>
      <li>Objects updated in <code>useLoop</code></li>
      <li>Objects with <code>pointer{enter,leave}</code></li>
      <li>Objects created using <code>v-for</code></li>
      <li>Basic geometries, materials</li>
      <li>Grouping/parenting</li>
      <li><code>OrbitControls</code></li>
    </ul>
    <h2>Preview</h2>
    <img src="" />
  </OverlayInfo>
  <TresCanvas v-bind="state">
    <BrownianDistributionExperience />
  </TresCanvas>
</template>
